<template>
  <div class="main-container">
    <!-- 轮播图和排行榜 -->
    <div class="banner-section">
<!--        轮播图-->
      <Camera :imgList="bannerList"/>
<!--        排行榜-->
      <TheCharts :TheChartsList="theChartsList"/>
    </div>

    <!-- 番剧更新时间表 -->
    <DramaUpdateSchedule :video-list="DramaUpdateScheduleList"/>

    <!-- 分类标签 -->
    <div class="category-tabs">
      <div class="category-tab active">全部</div>
      <div class="category-tab">连载动画</div>
      <div class="category-tab">完结动画</div>
      <div class="category-tab">资讯</div>
      <div class="category-tab">官方延伸</div>
      <div class="category-tab">新番时间表</div>
    </div>

    <!-- 热门推荐 -->
    <h2 class="section-title">热门推荐</h2>
    <div class="video-grid">
      <!-- 视频卡片 -->
        <VideoCard :videoset="video"/>
        <VideoCard :videoset="video"/>
        <VideoCard :videoset="video"/>
        <VideoCard :videoset="video"/>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, watch} from 'vue';
import Camera from '@/components/Carousel.vue'
import TheCharts from "@/components/TheCharts.vue";
import DramaUpdateSchedule from '@/components/DramaUpdateSchedule.vue'
import VideoCard from "@/components/VideoCardUp.vue";
import {getBannerList, getPopularList, getRecentList} from "@/api/video.js";
import {imgUrl} from "@/utils/http.js";

const video = {
    videoId:1,
    avatarUrl:imgUrl+"src/assets/image/lbt1.png",
    videoTitle:"【四月新番】鬼灭之刃 第三季 刀匠村篇",
    videoDuration:"24:15",
    videoPlayCount:"125.8万",
    videoUserName:"官方"
}
const bannerList = ref([])
const bannerListData = async () => {
  const res = await getBannerList()
  //处理数据
  bannerList.value = res.data.map(item => ({
    id: item.videoId,
    imgUrl:  imgUrl+item.videoChartCover,
    name: item.title,
    update_time: item.updateDate
  }))
  for (let i = 0; i<res.data.length;i++){
    bannerList.value[i].id = i+1
  }
}
const theChartsList = ref([])
const theChartsData = async () => {
  const res = await getPopularList()
  theChartsList.value = res.data.map(item => ({
    id: item.videoId,
    rankingName: item.title,
    rankingViews: item.viewCount
  }))
}
const DramaUpdateScheduleList = ref({
  monday:[],
  tuesday:[],
  wednesday:[],
  thursday:[],
  friday:[],
  saturday:[],
  sunday:[],
})
const DramaUpdateScheduleData = async () => {
  let data = ['周一','周二','周三','周四','周五','周六','周日']
  for(let i = 1;i<=7;i++){
    let res = await getRecentList(data[i-1])
    DramaUpdateScheduleList.value[Object.keys(DramaUpdateScheduleList.value)[i-1]] = res.data.map(item => ({
      id: item.videoId,
      animeName:item.title,
      animeTime:'第'+item.episode+'集'
    }))
  }
}

onMounted(() => {
  bannerListData()
  theChartsData()
  DramaUpdateScheduleData()
})
</script>

<style scoped>
/* 主要内容区 */
.main-container {
  width: 90%;
  max-width: 1200px;
  margin: 20px auto;
}

/* 轮播图和排行榜区域 */
.banner-section {
  display: flex;
  margin-bottom: 30px;
  gap: 20px;
}

/* 分类标签 */
.category-tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 2px solid #3498db;
}

.category-tab {
  padding: 8px 15px;
  background-color: #f5f5f5;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
}

.category-tab.active, .category-tab:hover {
  background-color: #3498db;
  color: white;
}

/* 视频卡片 */
.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

/* 分区标题 */
.section-title {
  font-size: 18px;
  margin: 30px 0 15px;
  padding-left: 10px;
  border-left: 4px solid #3498db;
}
</style>